<template>
	<div>
    <el-upload
      class="upload-demo"
      :on-change="onFileChange"
			:before-upload="beforeUpload"
			action=""
      :file-list="fileList"
			:accept="acceptFile"
			:limit="limit"
			:http-request="upLoadOnSelf"
			:on-remove="delFile"
			>
      <el-button size="small" type="primary">点击上传</el-button>
      <div v-if="notes" class="upload-describe">支持扩展名：{{acceptText}} 最多上传{{limit}}个文件, 单个文件大小不超过{{fileSize}}MB</div>
		</el-upload>
	</div>
</template>
<script>
/**
 * Fx-upload by shang 2020/8/25
 * @desc Fx-upload 文件上传通用组件
 * @params fileList[Array] 文件队列
 * @params fileSize[Number] 文件大小
 * @params disabled[Boolean] 只读
 * @params type[String] 文件类型 [file, image, word, excel]
 * @params notes[Boolean] 是否显示说明
 */
import uploadFIleConfig from '../wind-ui/js/config/upload_file_config.js'
import axios from 'axios'
export default {
	name: 'fx-el-upload',
	props: {
		fileList: {
			type: Array,
			default: () => {
				return []
			}
		},
		fileSize: {
			type: Number,
			default: 1
		},
		limit: {
			type: Number,
			default: 1
		},
		disabled: Boolean,
		type: {
			type: String,
			default: 'file'
		},
		notes: {
			type: Boolean,
			default: true
		}
	},
	data () {
		return {
			dialogImgVisible: false,
			currentImg: '',
			fileConfig: []
		}
	},
	computed: {
		accept () {
			return this.fileConfig[this.type] || []
		},
		acceptText () {
			return this.accept.join('，')
		},
		acceptFile () {
			let _accept = ''
			switch (this.type) {
			case 'file':
				_accept = '*'
				break
			case 'image':
				_accept = 'image/gif, image/jpeg, image/png'
				break
			case 'word':
				_accept = 'application/msword'
				break
			case 'excel':
				_accept = '.xls,.xlsx'
				break
			}
			return _accept
		}
	},
	mounted () {
		this.fileConfig = uploadFIleConfig
	},
	methods: {
		beforeUpload (file) {
			const typeName = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
			if (!uploadFIleConfig[this.type].includes(typeName)) {
				this.$fxMessage.warning(`只支持格式为：${uploadFIleConfig[this.type].join('，')}的文件`)
				return false
			}
			if (file.size > this.fileSize * 1024 * 1024) {
				this.$fxMessage.warning(`文件大小不能超过${this.fileSize}MB`)
				return false
			}
			if (this.fileList.lengh >= this.limit) {
				this.$fxMessage.warning(`最多上传${this.limit}个文件`)
				return false
			}
		},
		onFileChange () {
			this.$emit('on-change', this.fileList)
		},
		upLoadOnSelf (fileParam) {
			const fileObj = fileParam.file
			const form = new FormData()
			form.append('file', fileObj)
			axios({
				url: 'schedule/productionPlan/upload/getExcelId',
				method: 'post',
				data: form,
				headers: {
					'Content-Type': 'multipart/form-data'
				},
				onUploadProgress: progressEvent => {
					const progressPercent = (progressEvent.loaded / progressEvent.total * 100) | 0
					// 调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
					fileParam.onProgress({ percent: progressPercent })
				}
			}).then((res) => {
				// 上传成功 调用onSuccess方法，否则没有完成图标
				// 处理自己的逻辑
				fileParam.onSuccess()
				this.fileList.push(fileParam.file)
			}).catch(() => {
				// 上传失败 调用onError方法
				// 处理自己的逻辑
				fileParam.onError()
			})
		},
		delFile (file) {
			const index = this.fileList.findIndex(item => {
				return item.uid === file.uid
			})
			this.fileList.splice(index, 1)
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.upload-describe {
	width: 100%
	font-size: 12px
	color:$fxGray4
	display: inline
	margin-left: 20px
}
</style>

